import React, { useState, useEffect } from 'react'
import styles from './detail.less'
import { InputItem, Toast } from 'antd-mobile'
import { useForm } from 'react-hook-form';
import peopleIcon from '../../assets/enquiry/people.png'
import companyIcon from '../../assets/enquiry/company.png'
import phoneIcon from '../../assets/enquiry/phone.png'
import { useParams, useDispatch, useSelector } from 'dva'
import { useIntl } from 'umi';


function Detail() {
  const { id } = useParams()
  const dispatch = useDispatch()
  const {
    register,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm();
  const [focusIndex, setFocusIndex] = useState(1)
  const {
    wantBuyDetail
  } = useSelector(({ index }) => index)


  useEffect(() => {
    dispatch({
      type: 'index/apiGetWantbuyDetail',
      payload: {
        id: id
      }
    })
  }, [])

  useEffect(() => {
    if (wantBuyDetail) {
      setValue('wantPerson', wantBuyDetail.contactName)
      setValue('wantPhone', wantBuyDetail.contactNumber)
      setValue('wantCompany', wantBuyDetail.companyName)
      setValue('quantity', wantBuyDetail.quantity)
      setValue('description', wantBuyDetail.description)
    }
  }, [wantBuyDetail])


  function onSubmit(data) {
  }
  console.log(register, 'register')
  const intl = useIntl();
  return (
    <div className={styles.page}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <div className={styles.item}>
            <label className={styles.lable}>{intl.formatMessage({id:"THE_CONTACT"})}</label>
            <div className={styles.itemInputBox}>
              <input {...register('wantPerson', { required: true })} autoFocus={focusIndex == 1} disabled={true}/>
              <img src={peopleIcon} className={styles.icon}></img>
            </div>
            {errors.name && <p>{intl.formatMessage({id:"PLEASE_ENTER"})}</p>}
          </div>
          <div className={styles.item}>
            <label className={styles.lable}>{intl.formatMessage({id:"Phone"})}</label>
            <div className={styles.itemInputBox}>
              <input {...register('wantPhone', { required: true })} type="Number" disabled={true}/>
              <img src={phoneIcon} className={styles.icon} autoFocus={focusIndex == 2} type="number"></img>
            </div>
            {errors.phone && <p>{intl.formatMessage({id:"PHONE_NUMBER"})}</p>}
          </div>
          <div className={styles.item}>
            <label className={styles.lable}>{intl.formatMessage({id:"COMPANY_NAME"})}</label>
            <div className={styles.itemInputBox}>
              <input {...register('wantCompany', { required: true })} autoFocus={focusIndex == 3} disabled={true}/>
              <img src={companyIcon} className={styles.icon}></img>
            </div>
          </div>

          <div className={styles.numberItem}>
            <div className={styles.itemInputBox}>
              <span>{intl.formatMessage({id:"INQUIRIES"})}</span>
              <input {...register('quantity', { required: true })} autoFocus={focusIndex == 1} disabled={true}/>
            </div>
            {errors.name && <p>{intl.formatMessage({id:"PLEASE_ENTER_THE_QUANTITY"})}</p>}
          </div>

          <div className={styles.numberItem} >
            <div className={styles.itemInputBox} style={{ border: 'none' }}>
              <span>{intl.formatMessage({id:"PLEASE_ENTER_A_DESCRIPTION"})}</span>
            </div>
            <textarea {...register('description', { required: true })} placeholder={intl.formatMessage({id:"ENTER_A_DESCRIPTION_HERE"})} autoFocus={focusIndex == 1} disabled={true} />
            {errors.name && <p>{intl.formatMessage({id:"PLEASE_ENTER_THE_QUANTITY"})}</p>}
          </div>

        </div>
      </form>
    </div>
  )
}

export default Detail
